<!-- 绑定课程 -->
<template>
  <el-dialog
    title="绑定课程"
    :close-on-click-modal="false"
    width="55%"
    :visible.sync="visible">
    <el-form ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="90px">
      <el-form-item label="用户名：">
        {{username}}
      </el-form-item>

    <el-form-item
      v-for="(item, index) in dataForm"
      :label="'课程' + (index+1)+'：'"
      :key="index"
    >
      选择课程:
      <el-select v-model="dataForm[index].courseId" placeholder="选择课程">
          <el-option v-for="item in courseList" :key="item.courseId" :label="item.courseTitle" :value="item.courseId"></el-option>
      </el-select>
      选择日期:
      <el-date-picker value-format="yyyy-MM-dd" v-model="dataForm[index].endDate" type="date" placeholder="选择日期"></el-date-picker>
      <el-button @click.prevent="removeDomain(index)">删除</el-button>
    </el-form-item>
    <el-form-item>
      <el-button @click="addDomain">添加课程</el-button>
    </el-form-item>


    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data () {
    return {
      userId: '',
      visible: false,
      courseList: [],
      username: '',
      dataForm: [
        {courseId: '', endDate: '', userId: ''}
      ]
    }
  },
  methods: {
    init (id) {
      this.visible = true
      this.userId = id
      this.dataForm = [
        {courseId: '', endDate: '', userId: ''}
      ]
      this.dataForm[0].userId = id
      this.$http({
        url: this.$http.adornUrl('/admin/course/smallList/1/'),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({data}) => {
        this.courseList = data.list
      })
      this.$http({
        url: this.$http.adornUrl(`/admin/mycourse/info/${id}`),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({data}) => {
        if(data.myCourses.length) {
          this.dataForm = data.myCourses
        }
      })
      this.$http({
        url: this.$http.adornUrl(`/admin/user/info/${id}`),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.username = data.user.username
        }
      })
    },
    removeDomain(index) {
      if (index !== -1) {
        this.dataForm.splice(index, 1)
      }
    },
    addDomain () {
      this.dataForm.push({courseId: '', endDate: '', userId: this.userId})
    },
    dataFormSubmit () {
      this.$http({
        url: this.$http.adornUrl(`/admin/mycourse/save`),
        method: 'post',
        // data: this.$http.adornData({
        //   myCourses: this.dataForm
        // })
        data: this.dataForm
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.$message({
            message: '操作成功',
            type: 'success',
            duration: 1500,
            onClose: () => {
              this.visible = false
              this.$emit('refreshDataList')
            }
          })
        } else {
          this.$message.error(data.msg)
        }
      })
    }
  }
}
</script>